<template>
  <view class="custom-tab-bar">
    <view 
      v-for="(item, index) in tabs" 
      :key="index"
      class="tab-item"
      :class="{ active: current === index }"
      @click="switchTab(index)"
    >
      <image 
        class="tab-icon"
        :src="current === index ? $img(item.activeIcon) : $img(item.icon)"
        mode="aspectFit"
      />
      <text class="text">{{ item.text }}</text>
    </view>
  </view>
</template>

<script>
export default {
  props: ['current'],
  data() {
    return {
      tabs: [
        { text: '首页', icon: 'icon/首页.svg', activeIcon: 'icon/首页-active.svg' },
        { text: '应援', icon: 'icon/点赞.svg', activeIcon: 'icon/点赞-active.svg' },
        { text: '咨询', icon: 'icon/数据.svg', activeIcon: 'icon/数据-active.svg' },
        { text: '我的', icon: 'icon/我的.svg', activeIcon: 'icon/我的-active.svg' }
      ],
      pages: [
        '/pages/index/index',
        '/pages/hot/index',
        '/pages/news/index',
        '/pages/user/index'
      ]
    }
  },
  methods: {
    switchTab(index) {
      if (typeof index !== 'number') {
        console.error('索引类型错误:', index);
        return;
      }
      
      if (index < 0 || index >= this.tabs.length) {
        console.error('无效的tab索引:', index);
        return;
      }
      
      const path = '/' + this.pages[index].replace(/^\//, '');
      

      uni.switchTab({ 
        url: path,
        success: () => {
          console.log('成功跳转到:', path);
        },
        fail: (err) => {
          console.error('跳转失败:', err);
          uni.showToast({
            title: '页面跳转失败',
            icon: 'none'
          });
        }
      });
    }
  }
}
</script>

<style lang="scss">
.custom-tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 140rpx;
  display: flex;
  background: #fff;
  box-shadow: 0 -4rpx 20rpx rgba(0,0,0,0.08);
  z-index: 9999;

  .tab-item {
    flex: 1;
    display: grid;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10rpx 0;
    
    .tab-icon {
      width: 48rpx;
      height: 48rpx;
      margin-bottom: 8rpx;
      transition: all 0.3s;
    }
    
    .text {
      font-size: 24rpx;
      transition: all 0.3s;
      color: #666;
    }

    &.active {
      .tab-icon {
        transform: scale(1.2);
        filter: drop-shadow(0 4rpx 8rpx rgba(255,51,102,0.2));
      }
      
      .text {
        font-size: 28rpx;
        color: #FF3366;
      }
    }

    transition: all 0.3s ease;
    
    &:active {
      transform: scale(0.95);
      opacity: 0.8;
    }
  }
}
</style> 